<template>
    <div >
     <form >
        <div class="contain">
            <div class="row">
                <label class="name">标题</label>
            </div>
            <div class="row text-sbiao">
                <div>
                 
                    <!-- textarea多行文本框,将多行文本框的数据保存到feedback里 -->
                    <!-- maxlength最大输入长度 -->
                    <!-- placeholder提示信息 -->
                    <textarea v-model="sbiao" 
                    maxlength="30"
                     placeholder="点击输入"
                     class="input-sbiao" 
                    >
                   
                     </textarea>
                       <label class="sbiao-count">{{sbiao_count}}/30</label>
                     <!-- word_count实时输入的字数 -->
                     
                </div>
            </div>

            <!-- 首页图片 -->
            <div class="row">
              <div>
                <label class="name">首页图片</label>
                <!-- 图片数量 -->
                <label class="img-index-count">{{img_index_count}}/1</label>
              </div>

               <div class="sbiao-index-image">
                <div class="sbiao-index-image-box">
              <!-- item每一个链接项 -->
              <!-- index当前遍历到的图片索引，第一张图片索引是0，第二张是1 -->
              <label v-for="(item,index) in ssrc" :key="index">
                 <div class="sbiao-index-image-item" :src="item">
                <image :src="item" class="sbiao-index-image-icon"></image>
						<!--  -->
						<img class="iconfont sbiao-index-image-delete" src="https://my-wechatl.oss-cn-beijing.aliyuncs.com/shanchu.png"
						@click="deleteImgHandle_index(index)">
						
					</div>
                

                <!-- <text class="delete1" 
						@click="deleteImgHandle(index)">&#xe695;</text> -->

              </label>
              <label v-if="img_index_count<1" @click="uploadPicture_index">
                <img class="add-index-img" src="https://my-wechatl.oss-cn-beijing.aliyuncs.com/tianjia.png">
             
              </label>
            </div>
             </div>
            </div>

             <!-- 轮播图 -->
            <div class="row">
              <div>
                <label class="name">内容图片</label>
                <!-- 图片数量 -->
                <label class="img-count">{{img_count}}/9</label>
              </div>

               <div class="sbiao-image">
                <div class="sbiao-image-box">
              <!-- item每一个链接项 -->
              <!-- index当前遍历到的图片索引，第一张图片索引是0，第二张是1 -->
              <label v-for="(item,index) in nssrc" :key="index">
                 <div class="sbiao-image-item" :src="item">
                <image :src="item" class="sbiao-image-icon"></image>
						<!--  -->
						<img class="iconfont sbiao-image-delete" src="https://my-wechatl.oss-cn-beijing.aliyuncs.com/shanchu.png"
						@click="deleteImgHandle(index)">
						
					</div>
                

                <!-- <text class="delete1" 
						@click="deleteImgHandle(index)">&#xe695;</text> -->

              </label>
              <label v-if="img_count<9" @click="uploadPicture">
                <img class="add-img" src="https://my-wechatl.oss-cn-beijing.aliyuncs.com/tianjia.png">
             
              </label>
            </div>
             </div>
            </div>

            <!--正文-->
            <div class="row">
              <div class="name">
                正文
              </div>
              <div class="row text-szheng">
                <div>
                 
                    <!-- textarea多行文本框,将多行文本框的数据保存到feedback里 -->
                    <!-- maxlength最大输入长度 -->
                    <!-- placeholder提示信息 -->
                    <textarea v-model="szheng" 
                    maxlength="200"
                     placeholder="点击输入"
                     class="input-szheng" 
                    >
                   
                     </textarea>
                       <label class="szheng-count">{{szheng_count}}/200</label>
                     <!-- word_count实时输入的字数 -->
                     
                </div>
            </div>
            </div>

            </div>
            <button class="btn1" @click="submmit"  >提交</button>
            </form> 
    </div>
</template>

<script>
import {post,showModel} from '@/utli'

export default {
  
    data(){
        return{
            sbiao:"",//输入的反馈内容
            sbiao_count:0,//实时输入的字数
            ssrc:[],
            nssrc:[],
            img_count:0,
            img_index_count:0,
            szheng:"",
            szheng_count:0,
            currentIndex_index:"0",
            currentIndex:"0",

            
        }
    },
    // 实时查看输入的字数

    watch:{
    
        sbiao(){
          // this指当前的vue实例对象
            this.sbiao_count=this.sbiao.length
            console.log("反馈内容",this.sbiao)
        },
        ssrc(){
          this.img_index_count=this.ssrc.length
        },
         nssrc(){
          this.img_count=this.nssrc.length
        },
        szheng(){
          // this指当前的vue实例对象
            this.szheng_count=this.szheng.length
            console.log("反馈内容",this.szheng)
        },
    },
    methods:{
      //这里面的是方法
      // 添加图片
      uploadPicture_index(){
       
        // 用that代表vue的实例对象
        let that=this
        //微信自带小插件
        wx.chooseImage({
          // count上限两张
          count: 1,
          sizeType: ['original','compressed'],
          sourceType: ['album','camera'],
          success (res){
            // tempFilePaths可以作为img的src属性显示图片
            // 这里用res.是因为这是微信的接口方法
            const tempFilePaths = res.tempFilePaths
          // 用that来调用src这个对象
          that.ssrc.push(tempFilePaths)
          console.log("图片路径",that.ssrc)
          }
      })
    },

   deleteImgHandle_index(currentIndex_index){
				console.log("[删除图片]")
			    this.ssrc.splice(currentIndex_index,1)
				console.log(this.ssrc)
			},


      uploadPicture(){
       
        // 用that代表vue的实例对象
        let that=this
        //微信自带小插件
        wx.chooseImage({
          // count上限两张
          count: 9,
          sizeType: ['original','compressed'],
          sourceType: ['album','camera'],
          success (res){
            // tempFilePaths可以作为img的src属性显示图片
            // 这里用res.是因为这是微信的接口方法
            const tempFilePaths = res.tempFilePaths
          // 用that来调用src这个对象
          that.nssrc.push(tempFilePaths)
          console.log("图片路径",that.nssrc)
          }
      })
    },

   deleteImgHandle(currentIndex){
				console.log("[删除图片]")
			    this.nssrc.splice(currentIndex,1)
				console.log(this.nssrc)
			},

    // 异步加载
       async submmit(){
      
      if(this.sbiao_count>0){
          const data={
        sbiao:this.sbiao,
        // join字符串的形式
        ssrc:this.ssrc,
        nssrc:this.nssrc.join(","),
        szheng:this.szheng,
        openid:wx.getStorageSync('userinfo').openId,
        avatarurl:wx.getStorageSync('userinfo').avatarUrl,
        wx_name:wx.getStorageSync('userinfo').nickName,
        // create_time:wx.getStorageSync('userinfo').nickName
      }
    try{
       const res = await post('/weapp/userstrategy',data)
       console.log("从后端返回的执行正确的信息是:",res)
      showModel('提交成功',"发布成功")
            this.sbiao="",//输入的反馈内容
            this.ssrc=[],
            this.nssrc=[],
            this.szheng=""
      // 成功后返回首页
      // wx.reLaunch({
      // url: '../index/main' })
     
    }catch(e){
      console.log("从后端返回的执行错误的信息是",e)
       showModel('提交失败',"服务器出错")
    }
      }else{
        showModel("提交失败","不能为空")
      }
      
    }
  
  
},
 mounted(){
      const userinfo =wx.getStorageSync('userinfo')
      if(userinfo.openId){
          this.userinfo = userinfo
          console.log("this.userinfo",this.userinfo)
      }
  }
}
</script>

<style lang="scss">

.contain{
  background:#FFFFFF;
  font-size:15px;
   .text-sbiao {
    height:60px;
    
  }
  .text-szheng {
    height:120px;
    
  }
  .text {
    height: 110px;
  }

  //首页图片
  .row{
    border-bottom: 1px #E8E8E8 solid;
    padding: 5px 15px;

.sbiao-index-image{
		display: flex;
		flex-direction: column;
	
     .add-index-img {
      width:80px;
      height:80px;
    }
    .sbiao-index-image-box{
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			margin-top: 2px;
			.sbiao-index-image-item{
				border: 1px solid #70737F;
				border-radius: 8px;
				width: 66px;
				height: 66px;
				margin-right:10px;
			margin-top:7px;
				display: flex;
				background-color: #FFFFFF;
				position: relative;

				.sbiao-index-image-icon{
					border-radius: 8px;
					width: 100%;
					height: 100%;
					display: block;
				}
				.sbiao-index-image-delete{
					color: #ff0000;
					position: absolute;
					top: -5px;
					right: -5px;
//
					width:15px;
      		height:15px;

				}
			}
			
		}
    }
    //轮播图片
     .sbiao-image{
		display: flex;
		flex-direction: column;
	
     .add-img {
      width:80px;
      height:80px;
    }
    .sbiao-image-box{
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			margin-top: 2px;
			.sbiao-image-item{
				border: 1px solid #70737F;
				border-radius: 8px;
				width: 66px;
				height: 66px;
				margin-right:10px;
			margin-top:7px;
				display: flex;
				background-color: #FFFFFF;
				position: relative;

				.sbiao-image-icon{
					border-radius: 8px;
					width: 100%;
					height: 100%;
					display: block;
				}
				.sbiao-image-delete{
					color: #ff0000;
					position: absolute;
					top: -5px;
					right: -5px;
//
					width:15px;
      		height:15px;

				}
			}
			
		}
    }
    .name {
      width:80%;
      height: 40px;
      line-height: 40px;
    }
    .input-sbiao {
      width:100%;
      height:40px;
      font-size:14px;
      padding-top:5px;
    }
    .input-szheng {
      width:100%;
      height:100px;
      font-size:14px;
      padding-top:5px;
    }
    .sbiao-count {
     
      float:right;
      color: #808080;
    }
    .szheng-count {
      float:right;
      color: #808080;
    }
    .img-count {
      float:right;
      line-height: 40px;
      color: #808080;
    }

    .img-index-count {
      float:right;
      line-height: 40px;
      color: #808080;
    }
   
  }
}  
.btn1 {
  margin:20px auto;
  width:90%;
  border-radius: 5px;
  background:#EA5149;
  font-size:16px;
  color:#FFFFFF;
  font-weight:bold;
}





</style>
